<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
	 <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
		<title></title>
		<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
		<link rel="stylesheet" th:href="@{/plugin/font-awesome/css/font-awesome.min.css}" media="all" />
		<link rel="stylesheet" th:href="@{/src/lvdong/origin/css/app.css}" media="all" />
		<link rel="stylesheet" th:href="@{/src/lvdong/origin/css/themes/default.css}" media="all" id="skin" kit-skin />
		<script th:src="@{/plugin/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
  		<script th:src="@{/plugin/jquery/jquery-3.4.1.js}" charset="utf-8"></script>
  		<script type="text/javascript">
				//更新所有的下拉选项
				function querySelect(){
					var powers = "";
					$.ajax({
								type : "post",
								url : "/powerMg/selectAllPower",//从数据库查询所有的菜单
								dataType : "json",
								contentType : "application/x-www-form-urlencoded; charset=UTF-8",
								async : false,
								cache : false,
								success : function(data) {
									for (var i = 0; i < data.data.length; i++) {
										powers += "<input type='checkbox' name='power' value='"+data.data[i].power_id+"' title='"+data.data[i].description+"'>"
									}
									$("#add-power").html(powers);
								}
							});
				}
		</script>
		<script type="text/javascript">
		function child(data){
			var data=data;
			querySelect();
			var form=layui.form;
			form.val("test", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
				   "ID":data[0].role_id
				  ,"roleName": data[0].role_name // "name": "value"
				});
			var powers=[];
			for(var i=0;i<data[0].powers.length;i++){
				powers.push(data[0].powers[i].power_name);
			}
			for(var j=0;j<powers.length;j++){
				var powerCheckbox=$("input[name='power']");
				for(var k=0;k<powerCheckbox.length;k++){
					if(powerCheckbox[k].title==powers[j]){
						 powerCheckbox[k].checked=true;
					}
				}
		}
			//重新渲染，否则不会显示(实际数据是有的)
			form.render();
	}
		</script>
	</head>
	<body>
			<form class="layui-form" action="" lay-filter="test">
  <div class="layui-form-item">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-block">
      <input type="text" id="ID" name="ID" required  lay-verify="required" placeholder="ID" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色名</label>
    <div class="layui-input-block">
      <input type="text" id="add-roleName" name="roleName" required  lay-verify="required" placeholder="login登录页面账号" autocomplete="off" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">权限选项</label>
    <div id="add-power" class="layui-input-block">
    
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">提交编辑</button>
<!--       <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
    </div>
  </div>
</form>
 
<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
	  	//存储授权信息
		  var arr =new Array();
		$("input[name='power']:checked").each(function(index){
			arr[index] = $(this).val();
		});
            $.ajax({
              url:"/roleMg/updateOne",
              type:"POST",
              data:{
            	  role_id:$("#ID").val(),
            	  role_name:$("#add-roleName").val(),
            	  powerstr:arr.join(","),
              },
              dataType:'json',
		       async: false,
              success:function(data) {
                if (data.code == 1) {
                  layer.close(layer.index);
                  layer.msg(data.msg);
                  table.reload('test');
                } else {
                  layer.msg(data.msg);
                }
              },
              error: function() {
                console.log("ajax error");
              }
            });
  });
});
</script>
	</body>
</html>
